<template>
	<div class="all">
		<div class="top">
			<div class="hui k1 flexb">
				<div>ICCID卡号</div>
				<div class="red">* 每个账号最多可绑定3张流量卡</div>
			</div>
			
			<div class="inp">
				<van-field v-model="taocans.card_id" placeholder="请输入ICCID卡号" />
			</div>
			<div class="inp">
				<van-button :loading="ing" loading-text="加载中..." @click="gettaocan" type="primary" size="small" style="margin-bottom: 20rpx;">获取套餐</van-button>
			</div>
			<div class="tu" v-if="list.list == ''"><img src="../../static/img/t9.png"></div>
			<div v-if="list.list != ''">
				<div class="hui k1">选择激活套餐</div>
				
				<div class="taocanx">
					<van-radio-group v-model="taocans.package_id" >
						<van-radio :name="item.id" v-for="item in list.list" :key="item.id">{{item.title}}</van-radio>
					</van-radio-group>
				</div>
				
				<div class="hui k1">选择生效时间</div>
				<div>
					<van-radio-group v-model="taocans.type" direction="horizontal">
						<van-radio name="1" v-if="list.isCurrentActivi == 1">当月生效</van-radio>
						<van-radio name="2">次月生效</van-radio>
					</van-radio-group>
				</div>
				
				<div class="tu"><img src="../../static/img/t9.png"></div>
				
				<div class="ju juzhong">{{list.info}}</div>
				
				<div class="k2 btn" @click="bangding" :disabled="!ing">绑定充值</div>
			</div>
			
		</div>
<!-- 		<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
		
		<van-action-sheet v-model="show" title="标题" @select="onSelect">
		  <div class="content">内容</div>
		</van-action-sheet> -->
		
	</div>
</template>

<script>
	import axios from 'axios'
	import bus from '@/assets/bus.js'
	export default {
		name: 'genghuan',
		data() {
			return {
				taocans: {
					card_id: "",
					package_id: "",
					type: "2"
				},
				ing:false,
				show: false,
				list:{
					list:[]
				}
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {


		},
		methods: {
			gettaocan: function() {
				if(this.taocans.card_id == ''){
					this.$toast('请填写iccid');
					return false
				}
				this.ing = true
				this.axios.get(this.urls + `/mobile/api/findPackageWithIccid?iccid=`+this.taocans.card_id)
					.then(response => {
						this.list = response.data.result
						this.taocans.package_id = this.list.list[0].id
						this.ing = false
					})
			},
			bangding:function(){
				this.ing = true
				this.axios.post(this.urls + `/mobile/api/bandCard?card_id=${this.taocans.card_id}&package_id=${this.taocans.package_id}&type=${this.taocans.type}`)
					.then(response => {
						if(response.data.success == true){
							if(response.data.code == 300){
								//吊起支付
								this.axios.post(this.urls+`/mobile/api/wechatPay?price=`+response.data.result+`&title=首次绑卡&iccid=`+this.$route.query.canshu+`&package_id=${this.radio}`)
									.then(response => {
										WeixinJSBridge.invoke(
										 'getBrandWCPayRequest', {
										      "appId":response.data.result.appId,
										      'timeStamp': response.data.result.timeStamp,
										      'nonceStr': response.data.result.nonceStr,
										      'package': response.data.result.package,
										      'signType': "MD5",
										      'paySign': response.data.result.paySign,
										 },
										 function(res){
										       if(res.err_msg == "get_brand_wcpay_request:ok" ){
												   this.$toast('绑定成功！');
												   setTimeout(() => {
												   	this.$router.push('/')
												   },1000)
											   } 
										 }); 
									})
							}else{
								this.$toast('绑定成功！');
								setTimeout(() => {
									this.$router.push('/')
								},1000)
							}
						}else{
							this.ing = false
							this.$toast(response.data.message);
						}
						
					})
			}
		},

	}
</script>

<style scoped lang="less">
	.all {
		background: #FFFFFF;
		font-size: 0.28rem;
		min-height: 100vh;
		.taocanx{
			.van-radio{ margin-bottom: 0.2rem !important;}
		}
		.tu {
			text-align: center;
			padding: 0.4rem 0;

			img {
				width: 6rem;
			}
		}

		.top {}

		.k1 {
			margin-bottom: 0.3rem;
		}

		.k3 {
			color: #FF6367;
			margin-bottom: 0.2rem;
		}

		.k2 {
			margin: 0.5rem 0;
		}

		.van-field {
			background: #F7F7F7;
		}

		.red {
			color: #FF6367;
			font-size: 0.28rem;
			margin: 0 0.05rem;
		}

		.inp {
			position: relative;
			margin-bottom: 0.3rem;
		}

		.inpa {
			position: absolute;
			right: 0.1rem;
			top: 7px;
			color: #FFFFFF;
			background: #FFB300;
			padding: 0 0.2rem;
			border-radius: 0.1rem;
			font-size: 0.28rem;
			line-height: 30px;
		}
	}
</style>
